import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Result, WhiteSpace,List,Modal } from 'antd-mobile'
import BrowserCookies from 'browser-cookies'
import { logout } from '../../redux/user.redux'
import { Redirect } from 'react-router-dom'

class User extends Component{
    constructor(props) {
      super(props);
    
      this.logout = this.logout.bind(this)
    }
    logout(){
       const alert = Modal.alert
       alert('退出登录', '是否确认退出登录???', [
        { text: '取消', onPress: () => console.log('cancel')},
        { text: '确认', onPress: () => {
            BrowserCookies.erase('userid')
            this.props.logout()
        } },
      ]);
    }
    render(){
        const props = this.props
        const Item = List.Item
        const Brief = List.Item.Brief
        return  props.user?(
          <div>
              <Result
                img={<img src={require(`../images/${props.avatar}.jpg`)} alt="" style={{width:50}}/>}
                title={props.user}
                message={props.company?props.company:null}
              />
              <WhiteSpace />
              <List renderHeader={()=>'简介'}>
                  <Item multipleLine>
                      {props.title}
                      {props.desc.split("\n").map(v=><Brief key={v}>{v}</Brief>)}
                      {props.money?<Brief>薪资：{props.money}</Brief>:null}
                      
                  </Item>
              </List>
              <WhiteSpace size='lg'/>
              <List>
                  <Item onClick={this.logout}>
                      退出登录
                  </Item>
              </List>
          </div>
        ):<Redirect to={props.redirectTo}/>
    }
}

const mapStatetoProps =(state)=>{
  return state.user
}

const actionCreators = {logout}
User = connect(mapStatetoProps,actionCreators)(User)
export default User